<template>
  <div>
    <div class="bg">
      <!-- 登录容器 -->
      <div class="login">
        <!-- logo区块 -->
        <div class="logo">
          <img :src="logo" alt="" width="70px" height="70px" />
          <h1 class="ml">动力港能源管理平台</h1>
        </div>

        <!-- 表单容器区块 -->
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="formRef"
          @keyup.enter.native="handleLogin()"
        >
          <el-form-item prop="username">
            <el-input
              v-model="ruleForm.username"
              prefix-icon="User"
              placeholder="请输入用户名"
            />
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              v-model="ruleForm.password"
              prefix-icon="Lock"
              placeholder="请输入密码"
              type="password"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" style="width: 100%" @click="handleLogin()"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import logo from "@/assets/logo.png"; // 引入logo
import type { FormRules, FormInstance } from "element-plus"; // 引入表单验证类型
import { useUserStore } from "@/store/auth"; // 引入用户状态管理
// 引入路由
import { useRouter } from "vue-router"; // 引入路由
const router = useRouter(); // 创建路由实例

// 这个接口用于定义表单数据的类型
interface RuleForm {
  username: string;
  password: string;
}

// 这个对象用于存储表单的输入数据
const ruleForm = reactive<RuleForm>({
  username: "",
  password: "",
});

// 表单验证规则
const rules = reactive<FormRules<RuleForm>>({
  username: [
    { required: true, message: "用户名不能为空", trigger: "blur" },
    { min: 4, max: 8, message: "用户名要求4-8位数字字母组合", trigger: "blur" },
  ],
  password: [
    { required: true, message: "密码不能为空", trigger: "blur" },
    { min: 6, max: 16, message: "密码要求6-16位数字字母组合", trigger: "blur" },
  ],
});

// 引入 Element Plus 的 FormInstance 类型，用于定义表单实例的类型
// 表单引用（用于触发验证）
const formRef = ref<FormInstance>();

const userStore = useUserStore(); // 使用用户状态管理

// 登录逻辑
const handleLogin = () => {
  // 使用表单实例的 validate 方法进行验证
  // validate 方法会根据 rules 中定义的规则对表单数据进行验证
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      await userStore.login(ruleForm);
      // 跳转到首页
      router.push("/");
    }
  });
};
</script>

<style scoped lang="less">
.bg {
  background-image: url(../assets/bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100vh;
  .login {
    width: 500px;
    height: 350px;
    padding: 50px;
    box-shadow: 0 0 10px 10px #f4f4f4;
    text-align: center;
    position: absolute;
    top: 50%;
    margin-top: -200px;
    left: 10%;

    .logo {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 40px;
      h1 {
        color: rgb(14, 53, 148);
      }
    }
  }
}
</style>
